<template>
  <div class="destination">
    <Header/>
    <!--头部背景图片-->
    <div class="nav_top">
      <router-link v-for="(value,index) in nav" to="">
        <i :class="value.icon" :style="{color:value.Color}"></i>
        <span>{{value.name}}</span>
      </router-link>
    </div>
    <!-- 必玩景点导航 -->
    <div class="nav_bottom">
      <router-link v-for="(value,index) in view_nav" to="">{{value.view}}</router-link>
    </div>
    <!--必玩景点-->
    <div class="cont_top">
      <router-link v-for="(value,index) in view" to="">
        <div>
          <img :src="value.img" alt="">
          <div>{{value.Tickets}}</div>
        </div>
        <span>{{value.name}}</span>
      </router-link>
    </div>
    <!-- 查看更多 -->
    <div class="more"><router-link to="">查看更多>></router-link></div>
    <!-- 特惠特卖导航 -->
    <div class="preference">
      <div>
        <span>{{sell_nav.name}}</span>
      </div>
      <div>
        <span>{{sell_nav.text}}</span>
        <router-link to="">{{sell_nav.receive}}</router-link>
      </div>
    </div>
    <!-- 双飞自由行 -->
    <div class="cont_center">
      <!--左边-->
      <router-link to="" class="center_left">
        <img :src="sell_left.img" alt="">
        <div class="center_left_top">
          <p>{{sell_left.text1}}</p>
          <p>{{sell_left.text2}}</p>
        </div>
        <div class="center_left_bottom">
          <span>{{sell_left.phone}}</span>
          <p>{{sell_left.text3}}</p>
        </div>
      </router-link>
      <!--右边-->
      <div class="center_right">
        <router-link to="">
          <span>{{sell_right.play1}}</span>
          <p>{{sell_right.sell1}}</p>
          <p><span>{{sell_right.money1}}</span> {{sell_right.zhe1}}</p>
        </router-link>
        <router-link to="">
          <span>{{sell_right.play2}}</span>
          <p>{{sell_right.sell2}}</p>
          <p><span>{{sell_right.money2}}</span> {{sell_right.zhe2}}</p>
        </router-link>
      </div>
    </div>
    <!-- 环球旅行家日记 -->
    <div class="diary">
      <div>
        <router-link to=""><img :src="diary.img" alt=""></router-link>
        <div>
          <p>{{diary.text1}}</p>
          <p>{{diary.text2}}</p>
        </div>
      </div>
      <router-link to="">+{{diary.follow}}</router-link>
    </div>
    <!--极地探索-->
    <div class="cont_bottom">
     <div>
       <router-link v-for="(value,index) in explore" to="">
         <img :src="value.img" alt="">
       </router-link>
     </div>
      <span>极地探索·壮游南极三岛25日</span>
    </div>
    <!-- 推荐用户 -->
    <div class="recommend ">
      <router-link to="">
        <span>{{recommend_nav.name}}</span>
        {{recommend_nav.text}}
      </router-link>
      <router-link to="">{{recommend_nav.more}}</router-link>
    </div>
    <!-- 底部 -->
    <div class="footer">
      <router-link v-for="(value,index) in recommend" to="">
        <div>
          <img :src="value.img" alt="">
          <div>{{value.follow}}</div>
        </div>
        <div>
          <p>{{value.diary}}</p>
          <p>{{value.date}}</p>
        </div>
      </router-link>
    </div>
    <Footer/>
  </div>
</template>
<style scoped src="../../public/css/destination.css"></style>
<script>
    //  引入公共头部尾部组件
    import Header from '@/components/header.vue'
    import Footer from '@/components/footer.vue'
    export default {
        data(){
            return {

                //  顶部图片背景
                nav_top:{},
                //  导航
                nav:[],
                //  必玩景点导航
                view_nav:[],
                //  必玩景点
                view:[],
                //  特惠特卖导航
                sell_nav:{},
                //  特惠特卖左边
                sell_left:{},
                //  特惠特卖右边
                sell_right:{},
                //  环球旅行家日记
                diary:{},
                //   极地探索
                explore:[],
                //  推荐用户导航
                recommend_nav: {},
                //  推荐用户
                recommend :[],
            }
        },
        components: {
            Header,
            Footer
        },
        mounted(){
            this.$axios.get('http://118.178.85.166:3000/destination').then((data)=>{
                //  全部数据
                let Data=data.data[0];
                //  头像  名字
                // this.login=JSON.parse(Data.login)
                //  导航
                this.nav=JSON.parse(Data.nav);
                //  必玩景点导航
                this.view_nav=JSON.parse(Data.view_nav);
                //  必玩景点
                this.view=JSON.parse(Data.view);
                //  特惠特卖导航
                this.sell_nav=JSON.parse(Data.sell_nav);
                //  特惠特卖左边
                this.sell_left=JSON.parse(Data.sell_left);
                //  特惠特卖右边
                this.sell_right=JSON.parse(Data.sell_right);
                //  环球旅行家日记
                this.diary=JSON.parse(Data.diary);
                //   极地探索
                this.explore=JSON.parse(Data.explore);
                //  推荐用户导航
                this.recommend_nav=JSON.parse(Data.recommend_nav);
                //  推荐用户
                this.recommend=JSON.parse(Data.recommend);
            }).catch((err)=>{
                console.log('这是destination.vue中的错误:'+err);
            });
        }
    }
</script>
